<template>
	<ul class="list">
			<li v-for="(item,index) in persons" :key="item.id" :class="{'activeLi':item.boolean}" @touchstart="ShowDel(index)">
				<div class="main">
					<img :src="item.imgURL" >
					<h3>
						<span>{{item.name}}</span>
						<p>{{item.msg}}</p>
					</h3>
					<h4>
						<strong>{{item.times}}</strong>
						<i>1</i>
					</h4>
				</div>
				<button @click="fun()">删除</button>
			</li>
			</ul>
</template>

<script>
	export default{
		name:'List',
		data(){
				return{
					persons:[
						{id:1,imgURL:require('../assets/1.jpg'),name:'admin',msg:'兄弟，你会Vue.js吗？',times:'12-28',boolean:false},
						{id:2,imgURL:require('../assets/2.jpg'),name:'zjm',msg:'兄弟，你会Vue.js吗？',times:'12-29',boolean:false},
						{id:3,imgURL:require('../assets/1.jpg'),name:'Tom',msg:'兄弟，你会Vue.js吗？',times:'12-30',boolean:false}
					]
				}
			},
			methods:{
				ShowDel(id){
					for (let i=0;i<this.persons.length;i++) {
						if(i === id && !this.persons[id].boolean){
							this.persons[id].boolean = true;
						}else{
							this.persons[i].boolean = false;
						}
					}
				},
			}
	}
</script>

<style scoped>
	.list{
		overflow: hidden;
		background-color: #d3d3d3;
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
	.list li{
		width: 120%;
		background-color: #FFFFFF;
		overflow: hidden;
		border-bottom: 0.2rem solid gainsboro;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 10rem;
		transition: all 1s;
	}
	.list .activeLi{
		width: 100%;
		background-color: #b0c4de;
		transition: all 1s;
	}
	.list li .main{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 2rem;
		width: 100%;
		font-size: 1.5rem;
	}
	.list li .main img{
		width: 6rem;
		height: 6rem;
		border-radius: 3rem;
	}
	.list li .main h3{
		width: 65%;
		height: 65%;
	}
	.list li .main h3 span{
		display: block;
		line-height: 2rem;
		color: #c5c4c5;
	}
	.list li .main h4{
		width: 15%;
		height: 65%;
	}
	.list li .main h4 strong{
		display: block;
		color: #c5c4c5;
	}
	.list li .main h4 i{
		display: block;
		font-style: normal;
		margin-top: 1.5rem;
		color: white;
		background-color: #dc3545;
		width: 3rem;
		height: 3rem;
		border-radius: 1.5rem;
		text-align: center;
		line-height: 3rem;
	}
	.list li  button{
		display: block;
		width: 15rem;
		background-color: #dc3545;
		border-radius: 0.8rem;
		font-size: 1.9rem;
		border: none;
		height: 100%;
		color: white;
 }
</style>
